<template>
  <el-card    v-loading="loading">
    <div class="head f-row ai-c">
      <div class="total_score">{{ expert_info.scoreAvg }}</div>
      <div class="praise_rate pt-re">
        <div class="praise_rate_num">好评{{ expert_info.wellrate||0+ "%" }}</div>

        <!-- 
          middleReceived wellReceived negativeReceived
         -->
        <el-rate v-model="expert_info.scoreAvg" disabled text-color="#ff9900">
        </el-rate>
      </div>
      <div class="praise_fist rate_box">
        <div class="f-row ai-c">
          <div class="left_btn mr-1">全部{{ expert_info.all }}</div>
          <el-progress :percentage="100" color="#fca63a"></el-progress>
        </div>
        <div class="f-row ai-c">
          <div class="left_btn mr-1">中评{{ expert_info.middleReceived ||0}}</div>
          <el-progress
            :percentage="expert_info.middlrate||0"
            color="#fca63a"
          ></el-progress>
        </div>
      </div>
      <div class="praise_fist rate_box">
        <div class="f-row ai-c">
          <div class="left_btn mr-1">好评{{ expert_info.wellReceived  ||0}}</div>
          <el-progress
            :percentage="expert_info.wellrate||0"
            color="#fca63a"
          ></el-progress>
        </div>
        <div class="f-row ai-c">
          <div class="left_btn mr-1">
            差评{{ expert_info.negativeReceived ||0}}
          </div>
          <el-progress
            :percentage="expert_info.negarate||0"
            color="#fca63a"
          ></el-progress>
        </div>
      </div>
    </div>
    <div class="patient_eva">
      <div class="patient_eva_title mb-2">患者评价（{{ total }}）</div>
      <div class="f-row list" v-for="(i, k) in list" :key="k">
        <div class="left_avatar">
          <el-avatar
            :size="60"
            :src="
              i.member.face ||
              'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
            "
          ></el-avatar>
        </div>
        <div class="right_box">
          <div class="patient pt-re">
            <div
              class="reply cp"
              @click="answerDialog(i)"
              v-if="!i.expertReply"
            >
              回复
            </div>
            <div class="f-row ai-c">
              <div class="iname">{{ i.member.nickName }}</div>
              <el-rate
                v-model="i.grade"
                disabled
                text-color="#ff9900"
                show-score
              >
              </el-rate>
            </div>
            <div class="content">
              {{ i.userEvaluate }}
            </div>
            <div class="time">{{ i.userEvaluateTime }}</div>
          </div>
          <div class="doctor pt-re" v-if="i.expertReply">
            <div class="del cp" @click="delFn(i.id)">删除</div>
            <div class="doctor_reply_title">专家回复</div>
            <div class="doctor_reply_content">
              {{ i.expertReply }}
            </div>
            <div class="time">{{ i.expertReplyTime }}</div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="txt-c mt-1 cp"
      ref="showmore"
      @click="nextpage"
   
    >
      {{ next_text }}
    </div>
    <el-dialog
      title="回复"
      :visible.sync="replyDialog"
      width="30%"
      :before-close="replyDialogClose"
    >
      <el-input
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 8 }"
        placeholder="输入回复内容"
        v-model="areaVal"
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <div class="btn-light" @click="replyDialog = false">取消</div>
        <div class="btn-deep" @click="answer">确定</div>
      </span>
    </el-dialog>
  </el-card>
</template>
<script>
import { evaluate_api, evaluate_answer, del_answer } from "@/request/api";
import { mapState } from "vuex";
export default {
  data() {
    return {
      rate: 1,
      currentData: "", //当前回复的数据
      replyDialog: false, //回复弹框
      list: [],
      total: 0,
      page: 1,
      next_text: "查看更多",
      isDetele: false,
      areaVal: "", //回复内容
    };
  },
  computed: {
    ...mapState(["expert_info"]),
  },
  created() {
    this.getdata();
  },
  mounted() {},
  methods: {
    //回复弹框
    answerDialog(e) {
      this.currentData = e;
      this.replyDialog = true;
    },
    //回复
    answer() {
      this.currentData.expertReply = this.areaVal;
      this.loading=true
      evaluate_answer({
        ...this.currentData,
      }).then((res) => {
          this.loading=false
          this.replyDialog=false

        if (res.code == 200) {
          this.$message({
            message: "回复成功！",
            type: "success",
          });
          this.page = 1;
          this.list = [];
          this.getdata();
        } else {
          this.$message.error("回复失败");
        }
      });
    },
    //删除
    delFn(id) {
        this.loading=true
      del_answer(id).then((res) => {
          this.loading=false
        if (res.code == 200) {
          
          this.$message({
            message: "操作成功！",
            type: "success",
          });
          this.page = 1;
          this.list = [];
          this.getdata();
        } else {
          this.$message.error("操作失败");
        }
      });
    },
    //更多
    nextpage() {
      if (this.page * 10 <= this.total) {
        this.next_text = "正在加载~~";
        this.page = this.page + 1;
        this.getdata();
      } else {
        this.next_text = "没有更多数据了~~";
      }
    },
    //基础数据
    getdata() {
        this.loading=true
      evaluate_api({
        page: this.page,
        rows: 10,
      })
        .then((res) => {
            this.loading=false
          this.total = res.result.total;
          this.list = this.list.concat(res.result.rows);
        })
        .catch((err) => {
          err, "获取评论列表失败";
        });
    },
    //关闭回复弹窗
    replyDialogClose() {
      this.replyDialog = false;
    },
  },
};
</script>
<style  scoped lang='less'>
.reply {
  position: absolute;
  right: 1.375rem;
  top: 50%;
  transform: translateY(-50%);
  color: #cbcbcb;
  font-size: 0.875rem;
}
.del {
  position: absolute;
  right: 1.375rem;
  top: 50%;
  transform: translateY(-50%);
  color: #cbcbcb;
  font-size: 0.875rem;
}
.doctor_reply_content {
  font-size: 0.875rem;
  margin: 1.1875rem 0 1.125rem;
  color: #787878;
}
.doctor_reply_title {
  font-weight: 500;
  color: #070a0c;
}
.doctor {
  background: #f9f9f9;
  border-radius: 0.25rem;
  padding: 1.1875rem 1.625rem;
  margin-top: 1.25rem;
}
.list {
  border-bottom: 0.0625rem solid #ececec;
  padding: 1.25rem 0;
}
.time {
  font-size: 0.75rem;
  color: #cbcbcb;
}
.content {
  margin: 1rem 0 0.8125rem;
  font-size: 0.875rem;
  color: #787878;
}
.iname {
  color: #070a0c;
  line-height: 1.5rem;
  margin-right: 2.5rem;
}
.right_box {
  margin-left: 0.9375rem;
  width: calc(100% - 6.25rem);
}
.head {
  margin-bottom: 4.375rem;
}
.rate_box {
  display: grid;
  grid-row-gap: 1.3125rem;
  margin-left: 2.8125rem;
  width: 25rem;
}
.left_btn {
  font-size: 0.75rem;
  color: #8e8e8e;
  line-height: 1.5rem;
  background: #f0f0f0;
  border-radius: 0.25rem;
  width: 4.75rem;
  text-align: center;
  height: 1.5rem;
}
.el-progress {
  width: 11.5rem;
}
.el-card {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 3.125rem;
}
.total_score {
  font-size: 3.75rem;
  font-weight: bold;
  color: #181818;
  line-height: 3.25rem;
}
.praise_rate {
  .praise_rate_num {
    margin-bottom: 1.125rem;
    width: 7.275rem;
    height: 2.5rem;
    background: url("../../assets/images/others/rate_box.png") no-repeat;
    background-position: left top;
    background-size: cover;
    font-size: 0.875rem;
    color: #ffffff;
    line-height: 2.5rem;
    text-align: center;
    box-sizing: border-box;
  }
}
.el-progress{
  display: flex;
  align-items: center;
}
</style>